사용자 정의 컴포넌트 네이밍 오류

분명히 문제가 없어보이는데, 사용자 정의 컴포넌트가 제대로 동작하지 않는 경우가 있다.

다음과 같이 정의한 커스텀 NavLink가 작동하지 않았다.

const grayLink = styled(NavLink)`
  color: red;
  text-decoration: none;
`;
...
return <grayLink to="/qna">개발자 Q&A</grayLink>

유심히 보다보면 어색한 부분이 있다. 커스텀 컴포넌트가 소문자로 시작하는 것은 다소 어색하다.

커스텀 컴포넌트는 반드시 대문자로 시작해야한다.
이는 리액트 공식문서에서 명시되어 있다.

사용자 정의 컴포넌트는 반드시 대문자로 시작해야합니다
Element가 소문자로 시작하는 경우에는 <div> 나 <span> 같은 내장 컴포넌트라는 것을 뜻하며 'div' 나 'span' 같은 문자열 형태로 React.createElement에 전달됩니다. <Foo />와 같이 대문자로 시작하는 타입들은 React.createElement(Foo)의 형태로 컴파일 되며 JavaScript 파일 내에 사용자가 정의했거나 import 한 컴포넌트를 가리킵니다.

출처 : react 공식문서

리액트는 소문자로 시작하는 element를 HTML 태그로 인식하기 때문이다.